<template>
  <div class="container">
    <ul class="all-list"
        v-if="list.length>0">
      <li class="list-item"
          v-for="(item, index) in list"
          :key="index">
        <div class="header">
          {{item.time_msg}}
        </div>
        <!--商品列表  -->
        <ul class="goodslist">
          <li class="goodsitem"
              v-for="(val, key) in item.list"
              :key="key">
            <div class="top"
                 @tap="goods_detail(val)">
              <div class="logo">
                <img class="img"
                     v-if="img_url&&val.thumb_image"
                     :src="img_url+val.thumb_image"
                     alt="">
              </div>
              <div class="goodsinfo">
                <div class="title">{{val.title}}</div>
                <div class="sale">销量 {{val.sales_num}}</div>
                <div class="box">
                  <div>
                    <span class="yang"
                          v-if="val.price!=0||val.deduction_credit_type==0">¥</span>
                    <span class="price"
                          v-if="val.price!=0||val.deduction_credit_type==0">{{val.price}}</span>
                    <img class="addicon"
                         v-if='base_url&&val.deduction_credit_type!=0&&val.price!=0'
                         :src="base_url+'/mp_3.1.6/mmk_3.1.6/jyb_add.png'"
                         alt="">
                    <span class="addnum"
                          v-if="val.deduction_credit_type==1">{{val.deduction_credit}}</span>
                    <img class="icon"
                         v-if="base_url&&val.deduction_credit_type==1"
                         :src="base_url+'/mp_3.1.6/goldcoin/gold.png'"
                         alt="">
                    <span class="addnum addnum_y"
                          v-if="val.deduction_credit_type==2">{{val.deduction_credit}}</span>
                    <img class="icon"
                         v-if="base_url&&val.deduction_credit_type==2"
                         :src="base_url+'/mp_3.1.6/goldcoin/silver.png'"
                         alt="">
                  </div>
                  <div class="tags">
                    <span v-if="val.cross_border == 1">跨境</span>
                    <span v-if="val.activity_status == 2">秒杀</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom">
              <img class="plus"
                   v-if="base_url"
                   :src="base_url+'/collection/plus.png'"
                   alt="">
              <p class="plustitle"
                 v-if="val.plus_title&&val.plus_title!=''">{{val.plus_title}}</p>
              <img class="more"
                   v-if="base_url"
                   :src="base_url+'/mp_2.9/action.png'"
                   @tap.stop="open_action(val)"
                   alt="">
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <empty v-else></empty>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
import empty from '@/components/footmark/empty'
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
    }
  },
  methods: {
    goods_detail (item) {
      wx.navigateTo({ url: '/pages/package_mall/goods_detail/main?goods_id=' + item.id });
    },
    open_action (val) {
      this.$emit("show_action", val)
    }
  },
  components: {
    empty
  },
  created () {
    console.log(this.list);
  },
  props: ["list"],
  watch: {
    list (newVal) {
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  .all-list {
    .list-item {
      .header {
        padding: 20px 0 4px 15px;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
      }
      .goodslist {
        margin: 0 10px;
        box-sizing: border-box;
        .goodsitem {
          width: 100%;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
          border-radius: 5px;
          padding: 10px 10px 0;
          margin-bottom: 10px;
          box-sizing: border-box;
          .top {
            display: flex;
            .logo {
              width: 90px;
              height: 90px;
              border-radius: 6px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 6px;
              }
            }
            .goodsinfo {
              flex: 7;
              position: relative;
              .title {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .sale {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 16px;
                margin-top: 4px;
              }
              .box {
                width: 100%;
                position: absolute;
                bottom: 0;
                display: flex;
                justify-content: space-between;
                div {
                  font-family: PingFangSC-Regular, PingFang SC;
                  .yang {
                    font-size: 12px;
                    font-weight: 400;
                    color: #ff383e;
                    line-height: 16px;
                    margin-right: 1px;
                  }
                  .price {
                    font-size: 16px;
                    font-weight: 500;
                    color: #ff383e;
                    line-height: 20px;
                    margin-right: 2px;
                  }
                  .addicon {
                    width: 6px;
                    height: 6px;
                    // display: inline-block;
                    vertical-align: 4px;
                    margin: 0 3px 0 1px;
                  }
                  .addnum {
                    font-size: 16px;
                    font-weight: 500;
                    color: #f5d040;
                    line-height: 20px;
                    &.addnum_y {
                      color: #beccce;
                    }
                  }
                  .icon {
                    width: 15px;
                    height: 15px;
                    vertical-align: -2px;
                  }
                }
                .tags {
                  span {
                    display: inline-block;
                    width: 22px;
                    height: 12px;
                    line-height: 12px;
                    background: #ffeff0;
                    border-radius: 2px;
                    text-align: center;
                    font-size: 9px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ff383e;
                    margin-left: 4px;
                  }
                }
              }
            }
          }
          .bottom {
            display: flex;
            align-items: center;
            position: relative;
            padding: 12px 0;
            .plus {
              width: 29px;
              height: 16px;
              margin-right: 4px;
            }
            .plustitle {
              width: 80%;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .more {
              width: 14px;
              height: 5px;
              position: absolute;
              right: 0;
            }
          }
        }
      }
    }
  }
}
</style>

